<template>
	<footer class="footer">
		<span class="todo-count">剩余<strong> {{ num }} </strong></span>
		<ul class="filters">
			<li>
				<a :class="{selected: selected === 'all'}" href="javascript:;"
					@click="state('all')"
				>全部</a>
			</li>
			<li>
				<a href="javascript:;"
					:class="{selected: selected === 'active'}"
					@click="state('active')"
				>未完成</a>
			</li>
			<li>
				<a href="javascript:;"
					:class="{selected: selected === 'completed'}"
				@click="state('completed')"
				>已完成</a>
			</li>
		</ul>
		<button class="clear-completed"
			@click.prevent="screening"
		>清除已完成</button>
	</footer>
</template>

<script>
	export default {

		props: ["arr"],

		data () {
			return {
				selected: 'all'
			}
		},

		methods: {
			screening(){
				this.$emit("on")
			},
			state(process){
				this.selected = process
				this.$emit("state", process)
			},
		},

		computed: {
			num(){
				return this.arr.filter(item => item.isDone === false).length
			},
		},
	}
</script>
